<template>
  <div>
    <loader v-if="!list.coverImgUrl"></loader>
    <div class="music-item">
      <img :src="list.coverImgUrl" :alt="list.name" />
      <div class="music-item-info">
        <p>{{list.name}}</p>
        <p>
          <span></span>
          <span>最近更新:</span>
          <span>{{list.trackUpdateTime | timer}}</span>
          <span>({{list.updateFrequency}})</span>
        </p>
        <div class="button">
          <a href="javascript:;" title="播放">播放</a>
          <a href="javascript:;" title="添加到歌单">+</a>
          <a href="javascript:;" title="收藏">{{list.subscribedCount}}</a>
          <a href="javascript:;">转发</a>
          <a href="javascript:;">下载</a>
          <a href="javascript:;">评论</a>
        </div>
      </div>
    </div>    
  </div>
</template>

<script>
import { formatDate } from '@/common/format'

import { initData } from './initMixin'

import { _topList } from '@/network/discover'

import Loader from '@/components/common/loader/Loader'

export default {
  mixins: [initData], 
  components: {
    Loader
  },
  filters: {
    timer(time) {
      return formatDate(time, 'MM月dd日')
    }
  },
  mounted() {
    this.$bus.$on('itemClick', (item) => {
      _topList().then(res => {
        this.list = res.list[item.index]
      })
    })
  }  
}
</script>

<style scoped>
/* 歌曲所属类别区域 */
.music-item {
  color: #fff;
  display: flex;
  margin-bottom: 30px;
}
.music-item img {
  width: 150px;
  height: 150px;
}

/* 类别区域文字格式 */
.music-item-info {
  padding: 10px 25px;
  font-size: 12px;
}
.music-item-info span {
  margin-right: 5px;
}
.music-item-info p:nth-child(1) {
  font-size: 20px;
  margin-bottom: 15px;
}
.music-item-info p:nth-child(2) {
  color: #bbb;
  height: 20px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
}
.music-item-info p:nth-child(2) span:nth-child(1) {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(~@/assets/img/clock.png);
}

/* button */
.button {
  display: flex;
  align-items: center;
}

.button a {
  padding: 0 10px 0 30px;
  color: #000;
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  margin-right: 10px;
  background: url(~@/assets/img/button.png) no-repeat -5px -805px;
}

.button a:nth-child(1) {
  color: #fff;
  margin-right: 0;
  border-radius: 5px 0 0 5px;
  border-right: 1px solid #1c6dbd;
}
.button a:nth-child(1):hover {
  background-position-y: -633px;
}
.button a:nth-child(2) {
  color: #fff;
  font-size: 22px;
  padding: 0 8px;
  background-position: -5px -551px;
  border-left: 1px solid #1c6dbd;
  border-radius: 0 5px 5px 0;
}
.button a:nth-child(2):hover {
  background-position-y: -387px;
}
.button a:nth-child(3) {
  background-position: 0 -1063px;
}
.button a:nth-child(4) {
  background-position: 0 -1268px;
}
.button a:nth-child(5) {
  background-position: 0 -2805px;
}
.button a:nth-child(6) {
  background-position: 0 -1508px;
}
</style>